<template>
  <div class="pixel-app">
    <header>
      <div class="logo-container">
        <div class="pixel-logo"></div>
        <h1>像素风 TODO 社区</h1>
      </div>
      <div class="theme-toggle" @click="toggleTheme">
        <div class="theme-icon">{{ isDarkTheme ? '🌙' : '☀️' }}</div>
      </div>
    </header>

    <div class="container">
      <div class="sidebar">
        <div class="user-panel">
          <div class="pixel-avatar" :style="{ backgroundColor: userColor }">
            {{ userInitial }}
          </div>
          <input
              type="text"
              v-model="username"
              placeholder="输入你的名字"
              class="pixel-input username-input"
              @change="saveUsername"
          />
          <button class="pixel-btn color-btn" @click="changeUserColor" title="更换颜色">
            🎨
          </button>
        </div>

        <div class="lists-panel">
          <div class="panel-header">
            <h3>我的列表</h3>
            <div class="list-count">{{ myLists.length }}</div>
          </div>

          <ul class="lists">
            <li
                v-for="list in myLists"
                :key="list.id"
                :class="{ active: currentList?.id === list.id }"
                @click="selectList(list)"
            >
              <div class="list-icon">{{ list.isPublic ? '🌎' : '🔒' }}</div>
              <div class="list-name">{{ list.name }}</div>
              <div class="list-actions">
                <button class="pixel-btn mini-btn" @click.stop="confirmDeleteList(list)">🗑️</button>
              </div>
            </li>
          </ul>

          <div class="new-list">
            <input
                type="text"
                v-model="newListName"
                placeholder="新列表名称"
                class="pixel-input"
                @keyup.enter="createNewList"
            />
            <div class="visibility-toggle">
              <label class="toggle-label">
                <span>公开列表</span>
                <div class="toggle-switch">
                  <input type="checkbox" v-model="newListIsPublic">
                  <span class="toggle-slider"></span>
                </div>
              </label>
            </div>
            <button @click="createNewList" class="pixel-btn create-btn">
              <span class="btn-icon">+</span>
              <span>创建列表</span>
            </button>
          </div>
        </div>

        <div class="community-panel" v-if="publicLists.length > 0">
          <div class="panel-header">
            <h3>社区列表</h3>
            <div class="list-count">{{ publicLists.length }}</div>
          </div>

          <ul class="lists">
            <li
                v-for="list in publicLists"
                :key="list.id"
                :class="{ active: currentList?.id === list.id }"
                @click="selectList(list)"
            >
              <div class="list-icon community-icon">👥</div>
              <div class="list-info">
                <div class="list-name">{{ list.name }}</div>
                <div class="list-author">by {{ list.author }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="main-content">
        <!-- 任务详情页面 -->
        <div v-if="selectedTask" class="task-detail-view">
          <div class="detail-header">
            <button class="pixel-btn back-btn" @click="closeTaskDetail">
              ← 返回列表
            </button>
            <h2 class="detail-title">任务详情</h2>
          </div>

          <div class="detail-content">
            <div class="detail-section">
              <div class="detail-label">任务名称:</div>
              <div class="detail-text task-name">{{ selectedTask.text }}</div>
            </div>

            <div class="detail-row">
              <div class="detail-section">
                <div class="detail-label">创建于:</div>
                <div class="detail-text">{{ formatDetailDate(selectedTask.createdAt) }}</div>
              </div>

              <div class="detail-section">
                <div class="detail-label">持续时间:</div>
                <div class="detail-text">{{ getTaskDuration(selectedTask) }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-section">
                <div class="detail-label">类型:</div>
                <div class="detail-text">
                  <span class="detail-badge" :class="{ 'recurring-badge': selectedTask.type === 'recurring' }">
                    {{ selectedTask.type === 'once' ? '一次性' : '周期性' }}
                  </span>
                  <span v-if="selectedTask.type === 'recurring'" class="detail-badge recurrence-badge">
                    {{ getRecurrenceLabel(selectedTask.recurrence) }}
                  </span>
                </div>
              </div>

              <div class="detail-section">
                <div class="detail-label">状态:</div>
                <div class="detail-text">
                  <span class="detail-badge" :class="selectedTask.completed ? 'completed-badge' : 'active-badge'">
                    {{ selectedTask.completed ? '已完成' : '进行中' }}
                  </span>
                </div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-section" v-if="selectedTask.type === 'recurring' && selectedTask.nextDue">
                <div class="detail-label">下一次到期:</div>
                <div class="detail-text">{{ formatDate(selectedTask.nextDue) }}</div>
              </div>

              <div class="detail-section" v-if="selectedTask.lastCompleted">
                <div class="detail-label">最后完成于:</div>
                <div class="detail-text">{{ formatDetailDate(selectedTask.lastCompleted) }}</div>
              </div>
            </div>

            <div class="detail-section">
              <div class="detail-label">完成证明:</div>
              <div class="proof-gallery">
                <div v-if="selectedTask.proofImages && selectedTask.proofImages.length > 0" class="proof-images">
                  <div
                      v-for="(image, index) in selectedTask.proofImages"
                      :key="index"
                      class="proof-image-container"
                  >
                    <img :src="image.dataUrl" :alt="`完成证明 ${index + 1}`" class="proof-image" />
                    <div class="proof-image-actions">
                      <button
                          class="pixel-btn delete-image-btn"
                          @click="deleteProofImage(selectedTask, index)"
                          title="删除图片"
                      >
                        ×
                      </button>
                    </div>
                    <div class="proof-image-date">{{ formatDetailDate(image.addedAt) }}</div>
                  </div>
                </div>

                <div v-else class="no-proof">
                  暂无完成证明图片
                </div>

                <div class="upload-section" v-if="!selectedTask.completed && selectedTask.author === username">
                  <label class="upload-btn">
                    <input
                        type="file"
                        accept="image/*"
                        @change="handleImageUpload($event, selectedTask)"
                        hidden
                    >
                    <span class="btn-icon">📷</span>
                    <span>上传图片证明</span>
                  </label>
                </div>
              </div>
            </div>

            <div class="detail-actions">
              <button
                  v-if="selectedTask.author === username && !selectedTask.completed"
                  class="pixel-btn mark-done-btn"
                  @click="markSelectedTaskComplete"
              >
                ✓ 标记为已完成
              </button>

              <button
                  v-if="selectedTask.author === username && selectedTask.completed && selectedTask.type === 'recurring'"
                  class="pixel-btn advance-btn"
                  @click="advanceSelectedTask"
              >
                ↻ 完成并前进到下一周期
              </button>

              <button
                  v-if="selectedTask.author === username && selectedTask.completed && selectedTask.type === 'once'"
                  class="pixel-btn reopen-btn"
                  @click="reopenSelectedTask"
              >
                ↺ 重新打开任务
              </button>

              <button
                  v-if="selectedTask.author === username"
                  class="pixel-btn delete-btn"
                  @click="deleteSelectedTask"
              >
                🗑️ 删除任务
              </button>
            </div>
          </div>
        </div>

        <!-- 主列表视图 -->
        <div v-else-if="currentList" class="current-list">
          <div class="list-header">
            <div class="list-title">
              <h2>{{ currentList.name }}</h2>
              <div class="list-badge" :class="{ 'public-badge': currentList.isPublic, 'private-badge': !currentList.isPublic }">
                {{ currentList.isPublic ? '公开' : '私有' }}
              </div>
            </div>
            <div class="list-meta">
              <div class="meta-item" v-if="currentList.author !== username">
                <span class="meta-icon">👤</span>
                <span>{{ currentList.author }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-icon">📝</span>
                <span>{{ currentList.tasks.length }} 个任务</span>
              </div>
              <div class="meta-item">
                <span class="meta-icon">✅</span>
                <span>{{ completedTasksCount }} 已完成</span>
              </div>
            </div>
          </div>

          <!-- 添加任务面板 -->
          <div class="add-task-panel">
            <div class="task-input-group">
              <input
                  type="text"
                  v-model="newTaskText"
                  placeholder="添加新任务..."
                  class="pixel-input"
                  @keyup.enter="addTask"
              />

              <div class="task-type-toggle">
                <div
                    class="type-btn"
                    :class="{ active: newTaskType === 'once' }"
                    @click="newTaskType = 'once'"
                >
                  一次性
                </div>
                <div
                    class="type-btn"
                    :class="{ active: newTaskType === 'recurring' }"
                    @click="newTaskType = 'recurring'"
                >
                  周期性
                </div>
              </div>

              <div class="recurrence-settings" v-if="newTaskType === 'recurring'">
                <div class="recurrence-label">重复频率:</div>
                <div class="recurrence-options">
                  <div
                      class="recurrence-btn"
                      :class="{ active: newTaskRecurrence === 'daily' }"
                      @click="newTaskRecurrence = 'daily'"
                  >
                    每天
                  </div>
                  <div
                      class="recurrence-btn"
                      :class="{ active: newTaskRecurrence === 'weekly' }"
                      @click="newTaskRecurrence = 'weekly'"
                  >
                    每周
                  </div>
                  <div
                      class="recurrence-btn"
                      :class="{ active: newTaskRecurrence === 'monthly' }"
                      @click="newTaskRecurrence = 'monthly'"
                  >
                    每月
                  </div>
                </div>
              </div>
            </div>

            <button class="pixel-btn add-btn" @click="addTask">
              <span class="btn-icon">+</span>
              <span>添加任务</span>
            </button>
          </div>

          <div class="tasks-filter">
            <button
                class="filter-btn"
                :class="{ active: taskFilter === 'all' }"
                @click="taskFilter = 'all'"
            >
              全部
            </button>
            <button
                class="filter-btn"
                :class="{ active: taskFilter === 'active' }"
                @click="taskFilter = 'active'"
            >
              待完成
            </button>
            <button
                class="filter-btn"
                :class="{ active: taskFilter === 'completed' }"
                @click="taskFilter = 'completed'"
            >
              已完成
            </button>
            <button
                class="filter-btn"
                :class="{ active: taskFilter === 'recurring' }"
                @click="taskFilter = 'recurring'"
            >
              周期性
            </button>
          </div>

          <transition-group name="task-list" tag="ul" class="tasks">
            <li
                v-for="(task, index) in filteredTasks"
                :key="task.id || index"
                :class="{
                completed: task.completed,
                'task-item': true,
                'mine': task.author === username,
                'recurring-task': task.type === 'recurring',
                'has-proof': task.proofImages && task.proofImages.length > 0
              }"
                @click="viewTaskDetail(task)"
            >
              <div class="task-content" @click.stop>
                <label class="task-checkbox">
                  <input
                      type="checkbox"
                      v-model="task.completed"
                      @change="handleTaskCompletion(task)"
                  >
                  <span class="pixel-checkbox"></span>
                </label>
                <div class="task-details">
                  <span class="task-text">{{ task.text }}</span>
                  <div class="task-meta">
                    <span class="task-type-badge" v-if="task.type === 'recurring'">
                      {{ getRecurrenceLabel(task.recurrence) }}
                    </span>
                    <span class="task-date-badge">
                      {{ formatShortDate(task.createdAt) }}
                    </span>
                    <span class="task-duration-badge">
                      {{ getTaskDurationShort(task) }}
                    </span>
                    <span class="task-proof-badge" v-if="task.proofImages && task.proofImages.length > 0">
                      📸 {{ task.proofImages.length }}
                    </span>
                    <span class="task-author" v-if="task.author && task.author !== username">
                      {{ task.author }}
                    </span>
                    <span class="task-date" v-if="task.nextDue">
                      {{ formatDate(task.nextDue) }}
                    </span>

                    <span v-if="task.type === 'recurring' && task.completed" class="completion-info">
                      <button @click.stop="completeRecurringTask(task)" class="pixel-btn small-btn">
                        标记为完成并前进
                      </button>
                    </span>
                  </div>
                </div>
              </div>
              <div class="task-actions" @click.stop>
                <button @click="viewTaskDetail(task)" class="pixel-btn detail-btn" title="查看详情">👁️</button>
                <button @click="removeTask(getOriginalIndex(task))" class="pixel-btn delete-btn" title="删除">×</button>
              </div>
            </li>
          </transition-group>

          <div v-if="filteredTasks.length === 0" class="empty-state">
            <div class="empty-icon">📃</div>
            <p>没有{{ getFilterLabel() }}任务</p>
          </div>
        </div>

        <div v-else class="welcome">
          <div class="welcome-icon">📋</div>
          <h2>欢迎使用像素风 TODO 社区!</h2>
          <p>选择一个列表或创建新的列表开始使用</p>
          <div class="welcome-features">
            <div class="feature">
              <div class="feature-icon">📝</div>
              <div class="feature-text">创建任务列表</div>
            </div>
            <div class="feature">
              <div class="feature-icon">🔄</div>
              <div class="feature-text">周期性任务</div>
            </div>
            <div class="feature">
              <div class="feature-icon">🌎</div>
              <div class="feature-text">分享公开列表</div>
            </div>
            <div class="feature">
              <div class="feature-icon">📸</div>
              <div class="feature-text">图片完成证明</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认删除对话框 -->
    <div class="modal-overlay" v-if="showDeleteModal" @click="cancelDeleteList"></div>
    <div class="modal delete-modal" v-if="showDeleteModal">
      <h3>确认删除</h3>
      <p>你确定要删除列表 "{{ listToDelete?.name }}" 吗？</p>
      <p class="warning">此操作无法撤销!</p>
      <div class="modal-actions">
        <button @click="cancelDeleteList" class="pixel-btn cancel-btn">取消</button>
        <button @click="deleteList" class="pixel-btn delete-confirm-btn">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      userColor: '',
      lists: [],
      currentList: null,
      newListName: '',
      newListIsPublic: false,
      selectedTask: null,

      // 任务输入字段
      newTaskText: '',
      newTaskType: 'once',
      newTaskRecurrence: 'daily',

      taskFilter: 'all',
      isDarkTheme: true,
      showDeleteModal: false,
      listToDelete: null
    }
  },

  computed: {
    userInitial() {
      return this.username ? this.username.charAt(0).toUpperCase() : '?';
    },

    myLists() {
      return this.lists.filter(list => list.author === this.username);
    },

    publicLists() {
      return this.lists.filter(list => list.isPublic && list.author !== this.username);
    },

    filteredTasks() {
      if (!this.currentList) return [];

      if (this.taskFilter === 'all') {
        return this.currentList.tasks;
      } else if (this.taskFilter === 'active') {
        return this.currentList.tasks.filter(task => !task.completed);
      } else if (this.taskFilter === 'completed') {
        return this.currentList.tasks.filter(task => task.completed);
      } else if (this.taskFilter === 'recurring') {
        return this.currentList.tasks.filter(task => task.type === 'recurring');
      }

      return this.currentList.tasks;
    },

    completedTasksCount() {
      return this.currentList ? this.currentList.tasks.filter(task => task.completed).length : 0;
    }
  },

  methods: {
    generateRandomColor() {
      const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA5A5', '#A5FFD6', '#A5C8FF', '#FFD166', '#06D6A0', '#118AB2', '#EF476F'];
      return colors[Math.floor(Math.random() * colors.length)];
    },

    changeUserColor() {
      this.userColor = this.generateRandomColor();
      localStorage.setItem('todo_usercolor', this.userColor);
    },

    saveUsername() {
      if (!this.username) return;
      localStorage.setItem('todo_username', this.username);

      // 如果是第一次设置用户名，生成随机颜色
      if (!this.userColor) {
        this.userColor = this.generateRandomColor();
        localStorage.setItem('todo_usercolor', this.userColor);
      }
    },

    createNewList() {
      if (!this.newListName) return;
      if (!this.username) {
        alert('请先设置你的用户名！');
        return;
      }

      const newList = {
        id: Date.now(),
        name: this.newListName,
        author: this.username,
        isPublic: this.newListIsPublic,
        tasks: [],
        createdAt: new Date().toISOString()
      };

      this.lists.push(newList);
      this.saveLists();
      this.selectList(newList);
      this.newListName = '';
      this.newListIsPublic = false;
    },

    selectList(list) {
      this.selectedTask = null;
      this.currentList = list;
      this.checkRecurringTasks();
    },

    addTask() {
      console.log('添加任务:', this.newTaskText, this.newTaskType, this.newTaskRecurrence);

      if (!this.newTaskText || !this.currentList) {
        console.log('任务文本为空或没有选择列表');
        return;
      }

      const now = new Date();
      let nextDue = null;

      if (this.newTaskType === 'recurring') {
        nextDue = this.calculateNextDueDate(now, this.newTaskRecurrence);
      }

      const newTaskObj = {
        id: Date.now(),
        text: this.newTaskText,
        completed: false,
        author: this.username,
        createdAt: now.toISOString(),
        type: this.newTaskType,
        recurrence: this.newTaskType === 'recurring' ? this.newTaskRecurrence : null,
        nextDue: nextDue ? nextDue.toISOString() : null,
        lastCompleted: null,
        proofImages: []
      };

      // 使用push方法添加任务
      this.currentList.tasks.push(newTaskObj);
      this.saveLists();

      console.log('任务已添加:', newTaskObj);

      // 重置任务输入
      this.newTaskText = '';
      this.newTaskType = 'once';
      this.newTaskRecurrence = 'daily';
    },

    removeTask(index) {
      if (!this.currentList) return;

      if (this.selectedTask && this.currentList.tasks[index].id === this.selectedTask.id) {
        this.selectedTask = null;
      }

      this.currentList.tasks.splice(index, 1);
      this.saveLists();
    },

    getOriginalIndex(task) {
      return this.currentList.tasks.findIndex(t => t.id === task.id);
    },

    confirmDeleteList(list) {
      this.listToDelete = list;
      this.showDeleteModal = true;
    },

    cancelDeleteList() {
      this.showDeleteModal = false;
      this.listToDelete = null;
    },

    deleteList() {
      if (!this.listToDelete) return;

      const index = this.lists.findIndex(l => l.id === this.listToDelete.id);
      if (index !== -1) {
        this.lists.splice(index, 1);
        this.saveLists();

        if (this.currentList && this.currentList.id === this.listToDelete.id) {
          this.currentList = null;
          this.selectedTask = null;
        }
      }

      this.showDeleteModal = false;
      this.listToDelete = null;
    },

    toggleTheme() {
      this.isDarkTheme = !this.isDarkTheme;
      document.body.classList.toggle('light-theme', !this.isDarkTheme);
      localStorage.setItem('todo_dark_theme', this.isDarkTheme ? 'true' : 'false');
    },

    saveLists() {
      localStorage.setItem('todo_lists', JSON.stringify(this.lists));
    },

    // 处理任务完成状态变化
    handleTaskCompletion(task) {
      // 如果是一次性任务，直接更新状态
      if (task.type !== 'recurring') {
        if (task.completed) {
          task.lastCompleted = new Date().toISOString();
        } else {
          task.lastCompleted = null;
        }
        this.saveLists();
        return;
      }

      // 周期性任务现在可以被标记为已完成
      // 但不会自动前进到下一个周期，而是等待用户确认
      if (task.completed) {
        task.lastCompleted = new Date().toISOString();
      } else {
        task.lastCompleted = null;
      }

      this.saveLists();
    },

    // 为周期性任务前进到下一个周期
    completeRecurringTask(task) {
      const now = new Date();
      // 计算下一个到期日
      task.nextDue = this.calculateNextDueDate(now, task.recurrence).toISOString();
      // 重置为未完成状态
      task.completed = false;
      // 记录最后完成时间
      task.lastCompleted = now.toISOString();
      this.saveLists();
    },

    // 查看任务详情
    viewTaskDetail(task) {
      this.selectedTask = task;
    },

    // 关闭任务详情
    closeTaskDetail() {
      this.selectedTask = null;
    },

    // 在详情页处理任务完成
    markSelectedTaskComplete() {
      if (!this.selectedTask) return;

      this.selectedTask.completed = true;
      this.handleTaskCompletion(this.selectedTask);
    },

    // 在详情页处理周期性任务前进
    advanceSelectedTask() {
      if (!this.selectedTask || this.selectedTask.type !== 'recurring') return;

      this.completeRecurringTask(this.selectedTask);
    },

    // 重新打开已完成的一次性任务
    reopenSelectedTask() {
      if (!this.selectedTask || this.selectedTask.type !== 'once') return;

      this.selectedTask.completed = false;
      this.selectedTask.lastCompleted = null;
      this.saveLists();
    },

    // 从详情页删除任务
    deleteSelectedTask() {
      if (!this.selectedTask || !this.currentList) return;

      const index = this.getOriginalIndex(this.selectedTask);
      if (index !== -1) {
        this.removeTask(index);
      }
    },

    // 处理图片上传
    handleImageUpload(event, task) {
      const file = event.target.files[0];
      if (!file) return;

      // 检查文件类型和大小
      if (!file.type.match('image.*')) {
        alert('请上传图片文件');
        return;
      }

      if (file.size > 5000000) { // 5MB限制
        alert('图片大小不能超过5MB');
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => {
        const dataUrl = e.target.result;

        // 确保任务有proofImages数组
        if (!task.proofImages) {
          task.proofImages = [];
        }

        // 添加图片
        task.proofImages.push({
          dataUrl: dataUrl,
          addedAt: new Date().toISOString()
        });

        this.saveLists();
      };

      reader.readAsDataURL(file);
    },

    // 删除证明图片
    deleteProofImage(task, index) {
      if (!task.proofImages || index >= task.proofImages.length) return;

      task.proofImages.splice(index, 1);
      this.saveLists();
    },

    checkRecurringTasks() {
      if (!this.currentList) return;

      const now = new Date();
      let hasChanges = false;

      this.currentList.tasks.forEach(task => {
        if (task.type === 'recurring' && task.nextDue) {
          const nextDue = new Date(task.nextDue);

          // 如果已过期且未完成，更新下一个到期日
          if (nextDue < now && !task.completed) {
            task.nextDue = this.calculateNextDueDate(now, task.recurrence).toISOString();
            hasChanges = true;
          }
        }
      });

      if (hasChanges) {
        this.saveLists();
      }
    },

    calculateNextDueDate(fromDate, recurrence) {
      const nextDue = new Date(fromDate);

      switch (recurrence) {
        case 'daily':
          nextDue.setDate(nextDue.getDate() + 1);
          // 重置到每天的开始时间
          nextDue.setHours(0, 0, 0, 0);
          break;

        case 'weekly':
          nextDue.setDate(nextDue.getDate() + 7);
          // 重置到每周的开始时间
          nextDue.setHours(0, 0, 0, 0);
          break;

        case 'monthly':
          nextDue.setMonth(nextDue.getMonth() + 1);
          // 重置到每月的开始时间
          nextDue.setHours(0, 0, 0, 0);
          break;

        default:
          nextDue.setDate(nextDue.getDate() + 1);
      }

      return nextDue;
    },

    // 任务持续时间计算
    getTaskDuration(task) {
      const startDate = new Date(task.createdAt);
      let endDate;

      if (task.completed && task.lastCompleted) {
        endDate = new Date(task.lastCompleted);
      } else {
        endDate = new Date(); // 当前时间
      }

      const durationMs = endDate - startDate;
      const days = Math.floor(durationMs / (1000 * 60 * 60 * 24));

      if (days < 1) {
        const hours = Math.floor(durationMs / (1000 * 60 * 60));
        if (hours < 1) {
          const minutes = Math.floor(durationMs / (1000 * 60));
          return `${minutes} 分钟`;
        }
        return `${hours} 小时`;
      } else if (days < 30) {
        return `${days} 天`;
      } else if (days < 365) {
        const months = Math.floor(days / 30);
        return `${months} 个月`;
      } else {
        const years = Math.floor(days / 365);
        const remainingMonths = Math.floor((days % 365) / 30);
        return remainingMonths > 0 ? `${years} 年 ${remainingMonths} 个月` : `${years} 年`;
      }
    },

    // 列表视图中的简短持续时间显示
    getTaskDurationShort(task) {
      const startDate = new Date(task.createdAt);
      let endDate;

      if (task.completed && task.lastCompleted) {
        endDate = new Date(task.lastCompleted);
      } else {
        endDate = new Date();
      }

      const durationMs = endDate - startDate;
      const days = Math.floor(durationMs / (1000 * 60 * 60 * 24));

      if (days < 1) {
        const hours = Math.floor(durationMs / (1000 * 60 * 60));
        if (hours < 1) {
          return "< 1小时";
        }
        return `${hours}小时`;
      } else if (days < 30) {
        return `${days}天`;
      } else if (days < 365) {
        const months = Math.floor(days / 30);
        return `${months}月`;
      } else {
        const years = Math.floor(days / 365);
        return `${years}年`;
      }
    },

    formatDate(dateString) {
      const date = new Date(dateString);
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      const tomorrow = new Date(today);
      tomorrow.setDate(tomorrow.getDate() + 1);

      if (date.getTime() === today.getTime()) {
        return '今天';
      } else if (date.getTime() === tomorrow.getTime()) {
        return '明天';
      }

      return `${date.getMonth() + 1}月${date.getDate()}日`;
    },

    formatDetailDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();

      // 补零函数
      const pad = num => num.toString().padStart(2, '0');

      return `${year}年${month}月${day}日 ${pad(hours)}:${pad(minutes)}`;
    },

    formatShortDate(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1;
      const day = date.getDate();

      return `${month}/${day}`;
    },

    getRecurrenceLabel(recurrence) {
      switch (recurrence) {
        case 'daily': return '每天';
        case 'weekly': return '每周';
        case 'monthly': return '每月';
        default: return '';
      }
    },

    getFilterLabel() {
      switch (this.taskFilter) {
        case 'active': return '待完成';
        case 'completed': return '已完成';
        case 'recurring': return '周期性';
        default: return '';
      }
    },

    loadData() {
      // 加载主题设置
      const savedTheme = localStorage.getItem('todo_dark_theme');
      if (savedTheme) {
        this.isDarkTheme = savedTheme === 'true';
        document.body.classList.toggle('light-theme', !this.isDarkTheme);
      }

      // 加载用户数据
      const savedUsername = localStorage.getItem('todo_username');
      if (savedUsername) {
        this.username = savedUsername;
      }

      const savedColor = localStorage.getItem('todo_usercolor');
      if (savedColor) {
        this.userColor = savedColor;
      } else {
        this.userColor = this.generateRandomColor();
        localStorage.setItem('todo_usercolor', this.userColor);
      }

      // 加载列表数据
      const savedLists = localStorage.getItem('todo_lists');
      if (savedLists) {
        this.lists = JSON.parse(savedLists);
        // 检查周期性任务
        this.lists.forEach(list => {
          if (list.author === this.username) {
            list.tasks.forEach(task => {
              // 确保所有任务有proofImages字段
              if (!task.proofImages) {
                task.proofImages = [];
              }

              if (task.type === 'recurring' && task.nextDue) {
                const nextDue = new Date(task.nextDue);
                const now = new Date();

                // 如果任务已过期，更新下一个到期日
                if (nextDue < now && !task.completed) {
                  task.nextDue = this.calculateNextDueDate(now, task.recurrence).toISOString();
                }
              }
            });
          }
        });
        this.saveLists();
      } else {
        // 初始示例数据
        const now = new Date();
        const tomorrow = this.calculateNextDueDate(now, 'daily');

        this.lists = [
          {
            id: 1,
            name: '欢迎使用',
            author: 'System',
            isPublic: true,
            createdAt: new Date().toISOString(),
            tasks: [
              {
                id: 101,
                text: '创建你自己的TODO列表',
                completed: false,
                author: 'System',
                createdAt: new Date().toISOString(),
                type: 'once',
                proofImages: []
              },
              {
                id: 102,
                text: '添加一次性任务',
                completed: false,
                author: 'System',
                createdAt: new Date().toISOString(),
                type: 'once',
                proofImages: []
              },
              {
                id: 103,
                text: '尝试添加每日周期任务',
                completed: false,
                author: 'System',
                createdAt: new Date().toISOString(),
                type: 'recurring',
                recurrence: 'daily',
                nextDue: tomorrow.toISOString(),
                proofImages: []
              },
              {
                id: 104,
                text: '上传完成证明图片',
                completed: false,
                author: 'System',
                createdAt: new Date().toISOString(),
                type: 'once',
                proofImages: []
              },
              {
                id: 105,
                text: '查看任务详情页面',
                completed: false,
                author: 'System',
                createdAt: new Date().toISOString(),
                type: 'once',
                proofImages: []
              }
            ]
          }
        ];
      }
    }
  },

  mounted() {
    this.loadData();

    // 每天检查一次周期性任务
    this.recurringTasksChecker = setInterval(() => {
      this.checkRecurringTasks();
    }, 60 * 60 * 1000); // 每小时检查一次
  },

  beforeUnmount() {
    if (this.recurringTasksChecker) {
      clearInterval(this.recurringTasksChecker);
    }
  }
}
</script>

<style>
/* 全局像素风格 */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'VT323', monospace, system-ui;
  image-rendering: pixelated;
}

body {
  background-color: #181818;
  color: #e8e8e8;
  font-size: 18px;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

body.light-theme {
  background-color: #e6e6e6;
  color: #333333;
}

.pixel-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem;
  border-bottom: 4px solid #454545;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pixel-logo {
  width: 40px;
  height: 40px;
  background-color: #ff0080;
  border: 4px solid #fff;
  position: relative;
}

.pixel-logo:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  box-shadow:
      0 0 0 4px #ff0080;
}

header h1 {
  font-size: 2.2rem;
  text-shadow: 4px 4px 0 #ff0080;
  color: #fff;
}

.theme-toggle {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  border: 3px solid #fff;
}

.theme-icon {
  font-size: 1.5rem;
}

.container {
  display: flex;
  gap: 2rem;
}

.sidebar {
  width: 32%;
  min-width: 280px;
  background-color: #222;
  border: 4px solid #454545;
  padding: 1.2rem;
  border-radius: 2px;
}

.main-content {
  flex: 1;
  background-color: #222;
  border: 4px solid #454545;
  padding: 1.5rem;
  min-height: 600px;
  border-radius: 2px;
}

/* Light theme adjustments */
body.light-theme header {
  border-bottom-color: #999;
}

body.light-theme .sidebar,
body.light-theme .main-content {
  background-color: #ffffff;
  border-color: #999;
}

body.light-theme header h1 {
  color: #333;
  text-shadow: 4px 4px 0 #ff6bb8;
}

body.light-theme .theme-toggle {
  background-color: #e0e0e0;
  border-color: #666;
}

body.light-theme .pixel-logo {
  border-color: #333;
}

/* 用户面板 */
.user-panel {
  display: flex;
  align-items: center;
  margin-bottom: 1.8rem;
  gap: 0.8rem;
}

.pixel-avatar {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5rem;
  border: 3px solid #fff;
}

.username-input {
  flex: 1;
}

.color-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* 列表面板 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #454545;
}

.lists-panel, .community-panel {
  margin-bottom: 2.5rem;
}

.panel-header h3 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ff0080;
}

.list-count {
  background-color: #ff0080;
  color: white;
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 0.9rem;
  min-width: 25px;
  text-align: center;
}

.lists {
  list-style: none;
  margin-bottom: 1.2rem;
}

.lists li {
  padding: 0.7rem;
  margin-bottom: 0.5rem;
  background-color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-left: 4px solid transparent;
  border-radius: 2px;
}

.lists li:hover {
  background-color: #3a3a3a;
}

.lists li.active {
  border-left: 4px solid #ff0080;
  background-color: #3a3a3a;
}

.list-icon {
  margin-right: 0.7rem;
  font-size: 1.1rem;
}

.community-icon {
  background-color: #5d5dff;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.list-info {
  flex: 1;
}

.list-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-author {
  font-size: 0.8rem;
  color: #aaa;
}

.list-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.lists li:hover .list-actions {
  opacity: 1;
}

.mini-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.mini-btn:hover {
  background-color: rgba(255, 0, 128, 0.3);
}

/* 新列表表单 */
.new-list {
  margin-top: 1.2rem;
  padding: 1rem;
  background-color: #2a2a2a;
  border: 2px solid #454545;
  border-radius: 2px;
}

.visibility-toggle {
  margin: 0.9rem 0;
  display: flex;
  align-items: center;
}

.toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  transition: .4s;
  border: 2px solid #666;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #ff0080;
  border-color: #ff0080;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.create-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-icon {
  font-size: 1.2rem;
  line-height: 1;
}

/* 任务列表 */
.current-list {
  height: 100%;
}

.list-header {
  margin-bottom: 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #454545;
}

.list-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.list-title h2 {
  font-size: 1.7rem;
  flex: 1;
}

.list-badge {
  padding: 3px 10px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.public-badge {
  background-color: #5d5dff;
  color: white;
}

.private-badge {
  background-color: #666;
  color: white;
}

.list-meta {
  display: flex;
  gap: 1.2rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #aaa;
  font-size: 0.9rem;
}

.meta-icon {
  font-size: 1.1rem;
}

/* 任务添加面板 - 新设计 */
.add-task-panel {
  margin-bottom: 1.5rem;
  background-color: #2a2a2a;
  border-radius: 2px;
  padding: 1rem;
  border: 2px solid #454545;
}

.task-input-group {
  margin-bottom: 0.8rem;
}

.task-type-toggle {
  display: flex;
  margin: 0.8rem 0;
  background-color: #333;
  border-radius: 2px;
  overflow: hidden;
}

.type-btn {
  flex: 1;
  padding: 0.5rem;
  text-align: center;
  cursor: pointer;
  color: #aaa;
  transition: background-color 0.2s;
}

.type-btn:hover {
  background-color: #444;
  color: #fff;
}

.type-btn.active {
  background-color: #ff0080;
  color: white;
}

.recurrence-settings {
  margin-top: 0.8rem;
  padding: 0.7rem;
  background-color: #333;
  border-radius: 2px;
}

.recurrence-label {
  margin-bottom: 0.5rem;
  color: #aaa;
  font-size: 0.9rem;
}

.recurrence-options {
  display: flex;
  gap: 0.5rem;
}

.recurrence-btn {
  padding: 0.4rem 0.8rem;
  background-color: #3a3a3a;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  color: #ccc;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.recurrence-btn:hover {
  background-color: #444;
  color: #fff;
}

.recurrence-btn.active {
  background-color: #5d5dff;
  color: white;
}

.add-btn {
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tasks-filter {
  display: flex;
  margin-bottom: 1.2rem;
  background-color: #2a2a2a;
  border-radius: 2px;
  overflow: hidden;
}

.filter-btn {
  flex: 1;
  padding: 0.6rem;
  background-color: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.filter-btn:hover {
  background-color: #333;
  color: #fff;
}

.filter-btn.active {
  background-color: #ff0080;
  color: white;
}

.tasks {
  list-style: none;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem;
  margin-bottom: 0.6rem;
  background-color: #333;
  border-left: 3px solid #666;
  border-radius: 2px;
  transition: all 0.3s;
  cursor: pointer;
}

.task-item:hover {
  background-color: #3a3a3a;
}

.task-item.mine {
  border-left-color: #ff0080;
}

.task-item.recurring-task {
  border-left-color: #5d5dff;
}

.task-item.has-proof {
  border-left-color: #4ecdc4;
}

.task-item.completed {
  opacity: 0.7;
  text-decoration: line-through;
  background-color: #2a2a2a;
}

.task-content {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  flex: 1;
}

.task-details {
  flex: 1;
}

.task-meta {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
}

.task-type-badge,
.task-proof-badge,
.task-date-badge,
.task-duration-badge {
  font-size: 0.8rem;
  color: white;
  padding: 1px 6px;
  border-radius: 2px;
}

.task-type-badge {
  background-color: #5d5dff;
}

.task-proof-badge {
  background-color: #4ecdc4;
}

.task-date-badge {
  background-color: #666;
}

.task-duration-badge {
  background-color: #ff6b6b;
}

.task-author {
  font-size: 0.8rem;
  color: #aaa;
  background-color: #444;
  padding: 1px 6px;
  border-radius: 2px;
}

.task-date {
  font-size: 0.8rem;
  color: #fff;
  background-color: #2a2a2a;
  padding: 1px 6px;
  border-radius: 2px;
}

.completion-info {
  margin-left: auto;
}

.small-btn {
  font-size: 0.7rem;
  padding: 2px 8px;
  background-color: #5d5dff;
}

.small-btn:hover {
  background-color: #4a4ad9;
}

.task-actions {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.task-item:hover .task-actions {
  opacity: 1;
}

.delete-btn {
  background-color: #ff0080;
  border: none;
  width: 223px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.detail-btn {
  background-color: #5d5dff;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* 任务详情页面 */
.task-detail-view {
  height: 100%;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #454545;
}

.back-btn {
  margin-right: 1rem;
  background-color: #333;
}

.back-btn:hover {
  background-color: #444;
}

.detail-title {
  font-size: 1.5rem;
  color: #ff0080;
}

.detail-content {
  padding: 0 1rem;
}

.detail-section {
  margin-bottom: 1.5rem;
}

.detail-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.detail-row .detail-section {
  flex: 1;
  margin-bottom: 0;
}

.detail-label {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 0.5rem;
}

.detail-text {
  font-size: 1.1rem;
}

.task-name {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

.detail-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.recurring-badge {
  background-color: #5d5dff;
  color: white;
}

.recurrence-badge {
  background-color: #4a4ad9;
  color: white;
}

.completed-badge {
  background-color: #4ecdc4;
  color: white;
}

.active-badge {
  background-color: #ff6b6b;
  color: white;
}

.proof-gallery {
  margin-top: 1rem;
}

.proof-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.proof-image-container {
  position: relative;
  border: 3px solid #444;
  padding: 0.5rem;
  background-color: #2a2a2a;
}

.proof-image {
  width: 100%;
  height: auto;
  display: block;
}

.proof-image-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.proof-image-container:hover .proof-image-actions {
  opacity: 1;
}

.delete-image-btn {
  width: 24px;
  height: 24px;
  font-size: 1rem;
  padding: 0;
  background-color: rgba(255, 0, 128, 0.8);
}

.proof-image-date {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #aaa;
  text-align: center;
}

.no-proof {
  padding: 2rem;
  text-align: center;
  background-color: #2a2a2a;
  color: #aaa;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.upload-section {
  margin-top: 1rem;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #4ecdc4;
  color: white;
  border: none;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  border-radius: 2px;
}

.upload-btn:hover {
  background-color: #3db9b1;
}

.detail-actions {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  justify-content: flex-end;
}

.mark-done-btn {
  background-color: #4ecdc4;
}

.mark-done-btn:hover {
  background-color: #3db9b1;
}

.advance-btn {
  background-color: #5d5dff;
}

.advance-btn:hover {
  background-color: #4a4ad9;
}

.reopen-btn {
  background-color: #ff6b6b;
}

.reopen-btn:hover {
  background-color: #e45a5a;
}

/* 任务列表动画 */
.task-list-enter-active, .task-list-leave-active {
  transition: all 0.5s;
}

.task-list-enter-from, .task-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.task-list-move {
  transition: transform 0.5s;
}

/* 空状态 */
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: #666;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* 像素风格的表单元素 */
.pixel-input {
  background-color: #1a1a1a;
  border: 2px solid #666;
  color: #fff;
  padding: 0.7rem;
  outline: none;
  font-size: 1rem;
  width: 100%;
}

.pixel-input:focus {
  border-color: #ff0080;
}

.pixel-btn {
  background-color: #ff0080;
  color: white;
  border: none;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
}

.pixel-btn:hover {
  background-color: #d6006b;
}

/* 像素风格的复选框 */
.task-checkbox {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.task-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pixel-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #1a1a1a;
  border: 2px solid #666;
}

.task-checkbox input:checked ~ .pixel-checkbox {
  background-color: #ff0080;
  border-color: #ff0080;
}

.pixel-checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

.task-checkbox input:checked ~ .pixel-checkbox:after {
  display: block;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* 欢迎页面 */
.welcome {
  text-align: center;
  padding: 4rem 1rem;
}

.welcome-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: #ff0080;
}

.welcome h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ff0080;
}

.welcome p {
  color: #aaa;
  margin-bottom: 2.5rem;
}

.welcome-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.feature {
  text-align: center;
  padding: 1.5rem;
  background-color: #2a2a2a;
  border: 2px solid #454545;
  width: 180px;
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-text {
  font-size: 1rem;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2a2a2a;
  border: 4px solid #ff0080;
  padding: 1.5rem;
  z-index: 11;
  min-width: 300px;
  max-width: 500px;
}

.modal h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #ff0080;
}

.modal p {
  margin-bottom: 1rem;
}

.modal .warning {
  color: #ff0080;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.cancel-btn {
  background-color: #555;
}

.delete-confirm-btn {
  background-color: #ff0080;
}

/* 明亮模式特定样式调整 - 修复文字对比度问题 */
body.light-theme .sidebar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .main-content {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-theme .panel-header h3 {
  color: #e1005e;
}

body.light-theme .welcome h2 {
  color: #e1005e;
}

body.light-theme .welcome-icon {
  color: #e1005e;
}

body.light-theme .lists li {
  background-color: #f0f0f0;
  color: #333;
}

body.light-theme .lists li:hover {
  background-color: #e5e5e5;
}

body.light-theme .lists li.active {
  background-color: #e0e0e0;
  border-left-color: #ff0080;
}

body.light-theme .list-author {
  color: #555;
}

body.light-theme .new-list {
  background-color: #f0f0f0;
  border-color: #ccc;
}

body.light-theme .task-item {
  background-color: #f0f0f0;
  color: #333;
  border-left-color: #aaa;
}

body.light-theme .task-item.completed {
  background-color: #e8e8e8;
}

body.light-theme .task-item.mine {
  border-left-color: #ff0080;
}

body.light-theme .task-author {
  background-color: #e0e0e0;
  color: #555;
}

body.light-theme .tasks-filter {
  background-color: #e0e0e0;
}

body.light-theme .filter-btn {
  color: #555;
}

body.light-theme .filter-btn:hover {
  background-color: #d0d0d0;
  color: #333;
}

body.light-theme .pixel-input {
  background-color: #ffffff;
  border-color: #bbb;
  color: #333;
}

body.light-theme .pixel-checkbox {
  background-color: #ffffff;
  border-color: #999;
}

body.light-theme .empty-state {
  color: #888;
}

body.light-theme .feature {
  background-color: #f0f0f0;
  border-color: #ccc;
  color: #333;
}

body.light-theme .welcome p {
  color: #555;
}

body.light-theme .list-header {
  border-bottom-color: #ccc;
}

body.light-theme .meta-item {
  color: #555;
}

body.light-theme .modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

body.light-theme .modal {
  background-color: #f0f0f0;
  color: #333;
}

body.light-theme .pixel-avatar {
  border-color: #333;
}

body.light-theme .toggle-label {
  color: #333;
}

/* 明亮模式下的任务添加面板 */
body.light-theme .add-task-panel {
  background-color: #f0f0f0;
  border-color: #ccc;
}

body.light-theme .task-type-toggle {
  background-color: #e0e0e0;
}

body.light-theme .type-btn {
  color: #555;
}

body.light-theme .type-btn:hover {
  background-color: #d0d0d0;
  color: #333;
}

body.light-theme .recurrence-settings {
  background-color: #e5e5e5;
}

body.light-theme .recurrence-label {
  color: #555;
}

body.light-theme .recurrence-btn {
  background-color: #d8d8d8;
  color: #444;
}

body.light-theme .recurrence-btn:hover {
  background-color: #ccc;
  color: #333;
}

body.light-theme .recurrence-btn.active {
  background-color: #5d5dff;
  color: white;
}

body.light-theme .task-date {
  background-color: #e0e0e0;
  color: #333;
}

body.light-theme .small-btn {
  color: white;
}

/* 明亮模式下的任务详情页面 */
body.light-theme .detail-header {
  border-bottom-color: #ccc;
}

body.light-theme .detail-title {
  color: #e1005e;
}

body.light-theme .task-name {
  color: #333;
}

body.light-theme .detail-label {
  color: #555;
}

body.light-theme .proof-image-container {
  border-color: #ccc;
  background-color: #e8e8e8;
}

body.light-theme .proof-image-date {
  color: #666;
}

body.light-theme .no-proof {
  background-color: #e8e8e8;
  color: #666;
}

body.light-theme .back-btn {
  background-color: #d8d8d8;
  color: #333;
}

body.light-theme .back-btn:hover {
  background-color: #ccc;
}

/* 响应式调整 */
@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .welcome-features {
    justify-content: center;
    gap: 1rem;
  }

  .recurrence-options {
    flex-direction: column;
    gap: 0.5rem;
  }

  .detail-row {
    flex-direction: column;
    gap: 1rem;
  }

  .detail-actions {
    flex-direction: column;
    gap: 0.8rem;
  }

  .proof-images {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .pixel-app {
    padding: 0.8rem;
  }

  header {
    padding: 0.8rem 0;
  }

  header h1 {
    font-size: 1.6rem;
  }

  .list-meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  .task-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-content {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .task-actions {
    opacity: 1;
    align-self: flex-end;
  }
}
</style>